<template>
    <view class="content">
		<view class="user-info">
			<view class="left">
				<image class="image" v-if="userInfo && userInfo.headImg" :src="userInfo.headImg"/>
				<image class="image" v-else src="@/static/images/member/default_avatar.png" />
				
				<text v-if="!token" class="text" @tap="toPath">立即登录</text>
				<text v-else class="text">{{ userInfo.username }}</text>
			</view>
			
			<view class="cicle-small"></view>
			<view class="cicle-big"></view>
		</view>

		<scroll-view scroll-y="true">
			<!-- 订单列表 -->
			<view class="section-module">
				<view class="header">
					<view class="left">我的订单</view>
					<view class="right" @tap="toPath('/pages/order/list')">全部订单<u-icon name="arrow-right"></u-icon></view>
				</view>
				<view class="section-content">
					<view class="item" v-for="(item, index) in orderList" @tap="toPath(item.url)">
						<image class="image" mode="widthFix" v-if="item.icon === 'shopping'" src="@/static/images/member/shopping.png"></image>
						<image class="image" mode="widthFix" v-if="item.icon === 'delivery'" src="@/static/images/member/delivery.png"></image>
						<image class="image" mode="widthFix" v-if="item.icon === 'received'" src="@/static/images/member/received.png"></image>
						<text class="text">{{ item.name }}</text>

						<view class="num" v-if="index < 2 && Number(item.num) > 0">{{ item.num }}</view>
					</view>
				</view>
			</view>

			<!-- 余额 -->
			<view class="section-module">
				<view class="header">
					<view class="left">余额(元)</view>
					<view class="right" @tap="toPath('/pages/member/record')">账户明细<u-icon name="arrow-right"></u-icon></view>
				</view>
				<view class="banlance-info">
					<text class="num">{{ userInfo.balance || 0 }}</text>
					<view class="btn" @tap="toPath('/pages/member/balance')">提现</view>
				</view>
				<view class="frozen" v-if="parseFloat(userInfo.frozenMoney) > 0">（¥{{ userInfo.frozenMoney }}提现审核中）</view>
			</view>

			<!-- 必备服务 -->
			<view class="section-module">
				<view class="header">
					<view class="left">必备服务</view>
					<view class="right"></view>
				</view>
				<view class="section-content">
					<view class="item" v-for="item in commList" @tap="toPath(item.url)">
						<image class="image" mode="widthFix" v-if="item.icon === 'address'" src="@/static/images/member/address.png"></image>
						<image class="image" mode="widthFix" v-if="item.icon === 'group'" src="@/static/images/member/group.png"></image>
						<image class="image" mode="widthFix" v-if="item.icon === 'service'" src="@/static/images/member/service.png"></image>
						<image class="image" mode="widthFix" v-if="item.icon === 'rules'" src="@/static/images/member/rules.png"></image>
						<text class="text">{{ item.name }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
    </view>
</template>

<script>
	import { mapGetters } from 'vuex';
    export default {
        name: "center",
		data() {
			return {
				token: null,
				orderList: [
					{
						name: '待发货',
						icon: 'shopping',
						url: '/pages/order/list?type=1'
					},
					{
						name: '待收货',
						icon: 'delivery',
						url: '/pages/order/list?type=2'
					},
					{
						name: '已完成',
						icon: 'received',
						url: '/pages/order/list?type=3'
					}
				],
				commList: [
					{
						name: '收货地址',
						icon: 'address',
						url: '/pages/member/addressList?source=member'
					},
					{
						name: '我的拼团',
						icon: 'group',
						url: '/pages/group/list'
					},
					{
						name: '在线客服',
						icon: 'service',
						url: '/pages/index/webView?url=https://pt.xmonecode.com/group_service.html'
					},
					{
						name: '拼团规则',
						icon: 'rules',
						url: '/pages/index/webView?url=https://pt.xmonecode.com/group_rules.html'
					}
				]
			}
		},
		async onShow() {
			if (uni.getStorageSync('token')) {
				this.token = uni.getStorageSync('token');
				await this.$store.dispatch('getUserInfo');
				
				this.orderList[0].num = this.userInfo.deliverOrderNum;
				this.orderList[1].num = this.userInfo.confirmOrderNum;
				
				this.$forceUpdate();
			} else {
				this.token = null;
			}

			// #ifdef MP-WEIXIN
			uni.reportAnalytics('enter_wode');
			// #endif
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		methods: {
			// 跳转至页面
			toPath(url) {
				// #ifdef MP-WEIXIN
				if (url === '/pages/order/list') {
					uni.reportAnalytics('click_quanbudd');
				} else if (url === '/pages/order/list?type=1') {
					uni.reportAnalytics('click_daifahuo_icon');
				} else if (url === '/pages/order/list?type=2') {
					uni.reportAnalytics('click_daishouhuo_icon');
				} else if (url === '/pages/order/list?type=3') {
					uni.reportAnalytics('click_yiwancheng_icon');
				} else if (url === '/pages/member/record') {
					uni.reportAnalytics('click_zhanghumx');
				} else if (url === '/pages/member/balance') {
					uni.reportAnalytics('click_tixian_botton');
				} else if (url === '/pages/member/addressList?source=member') {
					uni.reportAnalytics('click_shouhuodz_icon');
				} else if (url === '/pages/group/list') {
					uni.reportAnalytics('click_wodept_icon');
				} else if (url === '/pages/order/addressList') {
					uni.reportAnalytics('click_zaixiankf_icon');
				} else if (url === '/pages/group/rules') {
					uni.reportAnalytics('click_pintuangz_icon');
				}
				// #endif
				
				if (!uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/sign/login?redirectUrl=navigateBack'
					});
					return false;
				}
				if (url === '/pages/index/webView?url=https://pt.xmonecode.com/group_service.html') {
					this.$service.common.base.settings().then(res => {
						uni.navigateTo({
							url: url
						});
						uni.setStorageSync('wechatInfo', { wx: res.wechat.wx, pic: res.wechat.pic })
					})
				} else {
					uni.navigateTo({
						url: url
					});
				}
			}
		}
    }
</script>

<style lang="scss" scoped>
.content {
	padding: 20rpx 26rpx;
	min-height: 90vh;
	background: linear-gradient(to bottom, #FEDC00 30%, #F6F7FA 30%, #F6F7FA 100%);
	position: relative;
	overflow-x: hidden;
	.cicle-big {
		width: 300rpx;
		height: 300rpx;
		background: #FFD600;
		position: absolute;
		top: 120rpx;
		right: -120rpx;
		border-radius: 50%;
	}
	.cicle-small {
		width: 130rpx;
		height: 130rpx;
		background: #FFD600;
		position: absolute;
		top: 20rpx;
		right: 250rpx;
		border-radius: 50%;
	}
	.user-info {
		padding: 30rpx 0;
		@include flexBox(space-between, center);
		.left {
			@include flexBox(flex-start, center);
			.image {
				width: 128rpx;
				height: 128rpx;
				border-radius: 50%;
				border: 6rpx solid #fff;
			}
			.text {
				font-size: 28rpx;
				font-weight: 600;
				color: #000;
				margin-left: 40rpx;
			}
		}
	}
	.section-module {
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		.header {
			padding: 18rpx 20rpx;
			border-bottom: 2rpx solid #EBECED;
			@include flexBox(space-between, center);
			.left {
				color: #2B2C2E;
				font-size: 28rpx;
				font-weight: 600;
			}
			.right {
				color: #979899;
				font-size: 24rpx;
			}
		}
		.section-content {
			padding: 30rpx 0;
			@include flexBox(space-around);
			.item {
				width: 120rpx;
				height: 100rpx;
				position: relative;
				@include flexBox(space-between, center, column);
				.image {
					width: 52rpx;
				}
				.text {
					color: #646566;
					font-size: 24rpx;
				}
				.num {
					position: absolute;
					right: 16rpx;
					top: -6rpx;
					border: 2rpx solid $main-color-text;
					color: $main-color-text;
					width: 36rpx;
					height: 36rpx;
					text-align: center;
					line-height: 36rpx;
					border-radius: 50rpx;
					background: #fff;
				}
			}
		}
		.banlance-info {
			padding: 40rpx 0 0;
			padding-bottom: 20rpx;
			@include flexBox(space-between, center);
			.num {
				font-size: 80rpx;
				color: #000;
				margin-left: 58rpx;
			}
			.btn {
				width: 122rpx;
				line-height: 56rpx;
				text-align: center;
				background: #333333;
				border-radius: 50rpx 0 0 50rpx;
				color: $main-color;
				font-size: 28rpx;
			}
		}
		.frozen {
			font-size: 24rpx;
			margin-left: 58rpx;
			padding-bottom: 40rpx;
		}
	}
}
</style>